<template>
    <div class="panel">
        <div class="panel-heading">
            <span>相关视频</span>                    
        </div>
        <div class="panel-body">
            <video-cover
                v-for="item in list" 
                :key="item.bvid"
                direction="horizontal"
                :author="item.owner.name"
                :play="item.stat.view"
                :danmaku="item.stat.danmaku"
                v-bind="item"
            ></video-cover>                  
        </div>
    </div>
</template>

<script>
import VideoCover from '@/components/VideoCover'
export default {
    name: 'TagVideo',
    components: {
        VideoCover
    },
    props: {
        list: {
            type: Array
        }
    }
}
</script>

<style lang="scss" scoped>
.panel {
    padding: {
        left: 10px;
        right: 10px;
    }
    &-heading {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: {
          top: 5px;
          bottom: 10px;
        };
        margin-top: 10px;
        font-size: 16px;
    }
    &-body {
        padding: {
            top: 10px;
            bottom: 10px;
        };       
    }
}
</style>